<template>
  <div>
    <div>
      <van-nav-bar
          title="店铺详情"
          left-arrow
          @click-left="back"
      />
    </div>
    <!--    1.店铺信息-->
      <van-cell :border="false" :title="stores.title">
      <template #default>
        <van-image :src="stores.imgurl"></van-image><br>
      </template>
      <template #label>
        <p>简介：{{stores.info}}</p>
        <label>地址：{{stores.adress}}</label><br>
        <label>电话：{{stores.phone}}</label><br>
        <label>店铺评分:<van-rate v-model="value"  allow-half void-icon="star" void-color="#eee" />  平均评分:{{score}}</label>
        <van-button plain type="primary" @click="df">打分</van-button>
      </template>
    </van-cell>


     <!--    菜品信息-->
     <div style="display: flex;justify-content: space-between">
<!--       左侧导航栏-->
       <van-sidebar v-model="activeKey" @change="onChange" style="width: 20%">
         <van-sidebar-item v-for="(c,index) in catagrey" :key="index" :title="c" />
       </van-sidebar>
<!--       右侧菜品-->
         <van-list
             style="width: 78%;margin-left: 2px"
             :finished="finished"
             finished-text="亲，我是有底线的！"

         >
           <van-card span="12"
                     style="margin-bottom: 20px"
                     v-for="s in food"
                     :key="s.id"
                     :title="s.title"
                     :thumb="s.imgurl"
           >
             <template #tags>
               <van-tag style="margin: 5px" plain type="danger">简介：{{s.info}}</van-tag><br>
               <van-tag style="margin: 5px" plain type="danger">原价：{{s.orginprice}}</van-tag>
               <van-tag style="margin: 5px" plain type="danger">现价：{{s.currentprice}}</van-tag>
               <van-tag style="margin: 5px" plain type="danger">包装费：{{s.packprice}}</van-tag>
             </template>
             <template #footer>
               <van-button size="mini" @click="dj(s.id,s.currentprice)">购买</van-button>
             </template>
             <!--    4.弹窗购物-->
           </van-card>
         </van-list>
       <div>
         <van-popup v-model="show" round position="bottom" :style="{ height: '30%' }" >
           <h3>单价：{{this.price}}￥</h3>
           <div>数量：<van-stepper v-model="num" step="1" style="margin-bottom: 50px"/></div>
           <van-button style="position: absolute;bottom: 1px" type="primary" @click="tz" block>加入购物车</van-button>
         </van-popup>
       </div>
     </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      show:false,
      num:1,
      foodid:0,
      defcat:'',
      price:0,
      //所有的food对象
      foods:{
      },
      catagrey:[],
      activeKey: 0,
      stores:[],
      food:[],
      finished:false,
      value: 0.0,
      score:0.0,
      sid:this.$route.query.id
    }
  },mounted() {
    this.loadData(this.$route.query.id)
    this.queryScore(this.sid)
  },
  methods:{
    onChange(index) {
      this.food = this.foods[this.catagrey[index]]
    },
    df(){
      this.axios.post("/api/score/add.do",{value:this.value,sid: this.sid}).then(res=>{
        if (res.data.code==200){
          this.queryScore(this.sid)
          this.$toast('评分成功')
        }
      })


    },
    dj(id,currentprice){
      this.show=true;
      this.foodid=id;
     this.price = currentprice;
    },
    tz(){
      // 加入购物车 请求接口
      var endprice = this.price*this.num;
      this.axios.post("/api/cart/join.do",{fid:this.foodid,num:this.num,price:endprice}).then(
          res=>{
            if(res.data.code==200){
              this.$toast("加购成功，请在购物车查看~")
              // this.$router.push("/cart");
            }else {
              this.$toast("亲，加入购物车失败！");
            }
          }
      )

    },
    queryScore(id){
      this.axios.get("/api/score/queryScore.do?sid="+id).then(res=>{
        this.score=res.data.data
      })
    },
    loadData(id){


      //请求接口 获取商品详细
      this.axios.get("/api/food/selectfood.do?sid="+id).then(res=>{
        if(res.data.code==200){
          this.foods = res.data.data;
          var index = 0;
          for(var i in this.foods){
            if(index==0){
              this.defcat=i;
              // console.log(this.defcat)
              // console.log('!!!!!!!!!!!')
              index++;
            }
            if(i=='店铺'){
              this.stores=this.foods[i][0];
            }else {
              this.catagrey.push(i);
            }
          }
        }
      })
    },
    kf(){
      this.$router.push("/chat");
    },
    back(){
      this.$router.push("/storeList");
    }
  }
}
</script>
<style>
.dvgd01 span{
  margin-right: 30px;
  margin-top: 10px;
}
</style>